<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>AJAX GET 请求</title>
		<style>
			#result {
				width: 200px;
				height: 100px;
				border: solid 1px #90b;
			}
		</style>
	</head>
	<body>
		<button>点击发送请求</button>
		<div id="result"></div>

		<script>
			//获取button元素
			const btn = document.getElementsByTagName("button")[0];
			const result = document.getElementById("result");
			//绑定事件
			btn.onclick = function () {
				//1. 创建对象
				const xhr = new XMLHttpRequest();
				//2. 初始化 设置请求方法和 url
				xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200&c=300");
				//3. 发送
				xhr.send();
				//4. 事件绑定 处理服务端返回的结果
				// on  when 当....时候
				// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
				// change  改变
				xhr.onreadystatechange = function () {
					//判断 (服务端返回了所有的结果)
					if (xhr.readyState === 4) {
						//判断响应状态码 200  404  403 401 500
						// 2xx 成功
						if (xhr.status >= 200 && xhr.status < 300) {
							//处理结果  行 头 空行 体
							//响应
							console.log(xhr.status); //状态码
							console.log(xhr.statusText); //状态字符串
							console.log(xhr.getAllResponseHeaders()); //所有响应头
							console.log(xhr.response); //响应体
							//设置 result 的文本
							result.innerHTML = xhr.response;
						} else {
						}
					}
				};
			};
		</script>
	</body>
</html>
